<template>
  <div class="find-box">
    <ul class="main-tab">
        <li :class="tabActive==index?'tab-item tab-active cur':'tab-item cur'" @click="clickActive(index)" v-for="(item,index) in tabBar" :key="index">{{ item }}</li>
    </ul>
    <div class="show-view">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name:'Find',
  data(){
    return {
      tabBar:['个性推荐','专属定制','歌单','排行榜','歌手','最新音乐'],
      tabActive:0
    }
  },
  methods:{
    // 添加类名
    clickActive(index){
      this.tabActive = index
    }
  }
}
</script>

<style lang="less" scoped>
.cur {
  cursor: pointer;
}
.find-box {
   .main-tab {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 3px 0px;
    margin-bottom: .4rem;
    .tab-item {
      position: relative;
      padding: .4rem .6rem;
      font-size: .6rem;
    }
    .tab-active {
      font-weight: 700;
      font-size: .9rem;
    }
    .tab-active::after {
          position: absolute;
          content: '';
          width: 60%;
          height: 1px;
          background: #ec4141;
          border-radius: 10px;
          display: block;
          padding-top: 1px;
          left: 50%;
          transform: translateX(-50%);
          bottom: -1px;
    }
  }
}
</style>